In design-time new nodes are added by using the Nodes Editor. The editor can be opened by double clicking on the component, by right clicking on the component and choosing Nodes Editor... option or clicking on ellipsis button beside Nodes property in Object Inspector.

Adding nodes

A node can be added after simple click on a button representing desired node type.

Some of the existing layout nodes are:

• Label
• Button
• CheckBox
• Trackbar
• Toolbar etc.

After a node is added, it can be selected by simply clicking on it inside the Form Designer. Its properties can be changed inside Delphi's Object Inspector as for any other component.

Child nodes

To add a child node, a parent node need to be selected first. If a Ctrl key is being hold, the node will be copied from its previous sibling. This can be useful when you want an array components with similar layout (width, padding, alignment etc.)

To delete a node, use the same command as for deleting any other Delphi component.

Creating layout

When a new node is added, it will occupy just a minimum (intrinsic) space needed for it, but it's size can be changed by setting Width property.

If there is enough horizontal space, the newly added node will be placed immediately after it sibling (if exist). If there are no enough space, the node will wrap into another line. Node can be forced to wrap with Clearing property.

Continue to the run-time tutorial.